<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
    .layui-table th{
        min-width: 200px;
        text-align: center;
    }
</style>
<body>

<script>
    let userInfo="";
    userInfo+= '<colgroup><col width="150"><col width="200"><col></colgroup>';
    userInfo+='<thead class="layui-anim layui-anim-up"><tr><th>昵称</th><th>用户名</th><th>邮箱</th><th>密码</th><th></th></tr></thead><tbody>';


    $(document).ready(function () {
        //获取全部用户信息
        $.ajax({
            async: true,
            url: "[[@{/user/allUser}]]",
            type: "post",
            success: function (data) {
                if(data.code=="0") {
                    layer.msg(data.msg);
                }
                else {
                    for(let i= 0;i<data.data.length;i++){
                        if(data.data[i].isadmin==1) {
                            userName = data.data[i].username;
                            userInfo += '<tr class="layui-anim layui-anim-up"><th>' +
                                data.data[i].nickname +
                                '</th><th>' +
                                data.data[i].username +
                                '</th><th>' +
                                data.data[i].email +
                                '</th><th>' +
                                data.data[i].password +
                                '</th><th><div class="layui-btn-container"><button type="button" class="layui-btn" onclick="deleteUser(' +
                                data.data[i].userid +
                                ')">禁用</button>' +
                                '<button type="button" class="layui-btn" onclick="updateUser(' +
                                "'" +
                                data.data[i].username +
                                "'" +
                                ')">修改</button></div></th></tr>';
                        }
                        else if(data.data[i].isadmin==-1){
                            userName = data.data[i].username;
                            userInfo += '<tr class="layui-anim layui-anim-up"><th style="text-decoration: line-through">' +
                                data.data[i].nickname +
                                '</th><th style="text-decoration: line-through">' +
                                data.data[i].username +
                                '</th><th style="text-decoration: line-through">' +
                                data.data[i].email +
                                '</th><th style="text-decoration: line-through">' +
                                data.data[i].password +
                                '</th><th><div class="layui-btn-container"><button disabled="true" type="button" onclick="deleteUser(' +
                                data.data[i].userid +
                                ')">禁用</button>' +
                                '<button disabled="true" type="button" onclick="updateUser(' +
                                "'" +
                                data.data[i].username +
                                "'" +
                                ')">修改</button></div></th></tr>';
                        }

                    }
                    userInfo+='</tbody>';
                    document.getElementById("userInfoTable").innerHTML=userInfo;
                layer.msg('加载完毕');
                }
                }
        });
        return false;
    });

    function deleteUser(userid){
        $.ajax({
            url: "[[@{/user/delete}]]",
            data:{
                userId:userid,   //与controller中的形参名相同
            },
            type:"POST",
            dataType:"JSON",
            success: function (data) {
                if(data.code == "1"){
                    layer.msg(data.data, { time: 1000 }, function () {
                        window.location.reload();
                    });
                }
                else {
                    layer.msg(data.msg,{time:1000},function (){
                        window.location.href="/user/loginPage";
                    });
                }
            }
        });
        return false;
    }

    function updateUser(userName){
        var layer = layui.layer;
        var form = layui.form;
        layer.open({
            type: 1
            ,resize: false
            ,shadeClose: true
            ,area: '350px'
            ,title: userName
            ,content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">'
                ,'<li class="layui-form-item">'
                ,'<label class="layui-form-label">昵称</label>'
                ,'<div class="layui-input-block">'
                ,'<input class="layui-input" lay-verify="required" name="nickName">'
                ,'</div>'
                ,'</li>'

                ,'<li class="layui-form-item">'
                ,'<label class="layui-form-label">密码</label>'
                ,'<div class="layui-input-block">'
                ,'<input class="layui-input" lay-verify="required" name="password">'
                ,'</div>'
                ,'</li>'

                ,'<li class="layui-form-item" style="text-align:center;">'
                ,'<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>'
                ,'</li>'
                ,'</ul>'].join('')
            ,success: function(layero, index){
                layero.find('.layui-layer-content').css('overflow', 'visible');

                form.render().on('submit(*)', function(data){
                    var field = data.field;
                    //发送修改请求
                    $.ajax({
                        url:'[[@{/user/updateByAdmin}]]',    //thymeleaf在ajax中设置地址行形式
                        data:{
                            username:userName,   //与controller中的形参名相同
                            nickname:field.nickName,
                            password:field.password,
                        },
                        type:"POST",
                        dataType:"JSON",
                        success:function (upData){
                            if(upData.code=="1"){
                                //修改成功
                                layer.msg(upData.data);
                                window.location.reload();
                            }else{
                                //修改失败
                                layer.msg(upData.msg);
                            }
                        }
                    });

                    layer.close(index); //关闭层
                });
            }
        });
        return false;
    }
</script>

<a class="layui-btn" href="/Movie/moviePage">返回首页</a>
<table id="userInfoTable" class="layui-table" lay-size="lg"></table>


<!-- body 末尾处引入 layui -->
<script src="../../static/layui/layui.js"></script>
</body>
</html>